<template>
  <el-dialog v-model="dialogVisible" :title="title" width="50%" :before-close="handleClose">
    <div class="tab4-dialog-hetong">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="125px" inline>
        <div class="title-box">
          <h3>合同信息</h3>
          <el-icon class="icon" v-if="inputType && showBtn" @click="openUpdate1">
            <IEpEdit />
          </el-icon>
        </div>

        <el-form-item prop="customer_name" label="客户名称">
          <el-input disabled readonly placeholder="客户名称" v-model="dataInfo.customer_name" :disabled="inputType" />
        </el-form-item>
        <el-form-item prop="order_name" label="合同名称">
          <el-input placeholder="合同名称" v-model="ruleForm.order_name" :disabled="inputType" />
        </el-form-item>
        <el-form-item prop="" label="合同编号">
          <el-input placeholder="合同编号" v-model="ruleForm.order_no" :disabled="inputType" />
          <!-- <el-checkbox
            @change="heTongChange"
            style="margin-left: 20px"
            v-model="ruleForm.checkbox"
            label="自动创建"
          /> -->
        </el-form-item>
        <el-form-item prop="order_uid" label="签署人">
          <el-tree-select default-expand-all node-key="id" filterable v-model="ruleForm.order_uid" :data="userOptions"
            check-strictly :render-after-expand="false" :props="{
              label: 'name',
            }" style="width: 100%" placeholder="签署人" clearable :disabled="inputType">
          </el-tree-select>
        </el-form-item>

        <el-form-item label="签署日期" prop="order_date">
          <el-date-picker :disabled="inputType" style="width: 100%" v-model="ruleForm.order_date" type="date"
            placeholder="签署日期" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item prop="is_virtual" label="虚拟合同">
          <el-radio-group v-model="ruleForm.is_virtual" :disabled="inputType">
            <el-radio :label="0" size="large">否</el-radio>
            <el-radio :label="1" size="large">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="contact_id" label="客户签署人">
          <el-select :disabled="inputType" style="width: 100%" v-model="ruleForm.contact_id" placeholder="客户签署人"
            filterable clearable>
            <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="h" label="联系方式">
          <el-input placeholder="联系方式" v-model="ruleForm.h" />
        </el-form-item> -->
        <el-form-item prop="" label="开始/结束日期">
          <el-date-picker :disabled="inputType" v-model="ruleForm.datetimerange" type="daterange" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item prop="amount_real" label="合同金额（元）">
          <el-input :disabled="inputType" placeholder="合同金额（元）" v-model="ruleForm.amount_real" />
        </el-form-item>
        <el-form-item prop="owner_by" label="销售">
          <el-tree-select :disabled="inputType" default-expand-all node-key="id" filterable v-model="ruleForm.owner_by"
            :data="userOptions" check-strictly :render-after-expand="false" :props="{
              label: 'name',
            }" style="width: 100%" placeholder="选择销售" clearable>
          </el-tree-select>
        </el-form-item>
        <el-form-item prop="has_fax" label="是否含税">
          <el-radio-group v-model="ruleForm.has_fax" :disabled="inputType">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="is_invoice" label="是否开具发票">
          <el-radio-group v-model="ruleForm.is_invoice" :disabled="inputType">
            <el-radio :label="0">不开票</el-radio>
            <el-radio :label="1">开票</el-radio>
            <el-radio :label="2">开收据</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="truck_price" label="运费(元)">
          <div style="white-space: nowrap">
            <el-input :disabled="inputType" placeholder="运费" v-model="ruleForm.truck_price" />
            <span style="color: #8c8d8f; font-size: 12px">
              *运费包含在合同金额里
            </span>
          </div>
        </el-form-item>

        <el-form-item prop="" label="合同附件" style="width: 100%">
          <el-upload class="upload-demo" action="#" :auto-upload="false" :on-change="fileOnChange"
            :show-file-list="false" v-if="!inputType">
            <div class="file-btn">
              <el-button type="primary" size="small"> 文件上传 </el-button>
            </div>
          </el-upload>

          <div class="file-list" v-if="fileList.length > 0" style="width: 100%">
            <div class="file-list-item" v-for="(item, i) in fileList">
              <a :href="item.file_url || item.url" target="_blank" :download="item.file_name">
                {{ item.file_name || item.name }}
              </a>
              <el-icon v-if="!inputType" class="close" @click="fileRemove(i)">
                <IEpClose />
              </el-icon>
            </div>
          </div>
          <div v-if="fileList.length == 0 && inputType" style="font-size: 12px; color: #8c8d8f">
            暂无附件
          </div>
        </el-form-item>
        <el-form-item prop="contract" label="相关合同">
          <el-select v-model="ruleForm.contract" placeholder="相关合同" style="width: 100%" multiple :disabled="inputType">
            <el-option v-for="item in contractOptions" :key="item.id" :label="item.order_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="remark" label="备注" style="width: 100%">
          <el-input :disabled="inputType" placeholder="备注" type="textarea" :rows="2" v-model="ruleForm.remark" />
        </el-form-item>
        <!-- 回款信息 -->
        <div class="title-box">
          <h3>回款计划</h3>
          <el-icon class="icon" @click="openUpdate2" v-if="inputType && showBtn">
            <IEpPlus />
          </el-icon>
        </div>
        <el-table :data="collectionTable" border>
          <el-table-column prop="num" label="期次" />
          <el-table-column prop="plan_money" label="金额" />
          <el-table-column prop="plan_date" label="日期" />
          <el-table-column label="操作" width="80" v-if="showBtn">
            <template #default="scoped">
              <el-button v-if="inputType" type="primary" @click="openEdit2(scoped)" link>
                编辑
              </el-button>
              <el-button v-if="!inputType" type="danger" @click="collectionDel(scoped)" link>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0" v-if="!inputType">
          <el-input style="width: 220px" placeholder="期次" v-model="collectionForm.num" />
          <el-input style="width: 220px; margin: 0 10px" placeholder="金额（元）" v-model="collectionForm.plan_money" />
          <el-date-picker style="width: 220px; margin-right: 10px" v-model="collectionForm.plan_date" type="date"
            placeholder="日期" value-format="YYYY-MM-DD" />
          <el-button type="primary" @click="addCollection">
            + 新增期次
          </el-button>
        </div>

        <!-- 回款记录 -->
        <div style="margin-top: 20px" v-if="submitType == 'update'">
          <div class="title-box">
            <h3>回款记录</h3>
            <el-icon class="icon" v-if="showBtn" @click="openUpdate3">
              <IEpPlus />
            </el-icon>
          </div>
          <el-table :data="collectionLogs" border>
            <el-table-column prop="return_money" label="回款金额" />
            <el-table-column prop="return_date" label="回款日期" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="附件">
              <template #default="{ row }">
                <div v-if="row.files">
                  <div v-for="item in JSON.parse(row.files)">
                    <span v-if="isImageUrl(item.url)" style="color: var(--el-color-primary); cursor: pointer;"
                      @click="lookImg(item.url)"> {{
                        item.name }}</span>
                    <a v-else :href="item.url" target="_blank" :download="item.name">
                      {{ item.name }}
                    </a>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" width="80">
              <template #default="{ row }">
                <el-button
                  v-if="inputType"
                  type="primary"
                  @click="openEdit3(row)"
                  link
                >
                  编辑
                </el-button>
                <el-button
                  v-if="!inputType"
                  type="danger"
                  @click="collectionDel(scoped)"
                  link
                >
                  删除
                </el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>

        <!-- 配送信息 -->
        <!-- <h3 style="margin: 20px 0 20px 0">配送信息</h3> -->
        <!-- v-if="submitType == 'add'" -->
        <div>
          <div class="title-box" style="margin-top: 20px">
            <h3>配送信息</h3>
            <el-icon class="icon" v-if="inputType && showBtn" @click="openUpdate4">
              <IEpEdit />
            </el-icon>
          </div>
          <el-form-item label="收货人">
            <el-input style="width: 100%" placeholder="收货人" v-model="ruleForm.addr_name" :disabled="true" />
          </el-form-item>
          <el-form-item label="收货人电话">
            <el-input placeholder="收货人电话" v-model="ruleForm.addr_phone" :disabled="true" />
          </el-form-item>
          <el-form-item label="收货人地址" style="width: 100%">
            <el-input :disabled="true" placeholder="收货人地址" type="textarea" :rows="2" v-model="ruleForm.address" />
          </el-form-item>
        </div>

        <!-- 商品明细 -->
        <h3 style="margin-top: 20px">商品明细</h3>

        <div class="goods-head">
          <div>
            <label>商品数量：</label>
            <span>{{ allData.num || 0 }}</span>
            <label>合同价总和：</label>
            <span>{{ allData.price || 0 }} 元</span>
            <!-- <label>优惠总额：</label>
            <span>1 元</span>
            <label>销售总额：</label>
            <span>1 元</span> -->
          </div>
          <el-button v-if="!inputType && showBtn" type="primary" @click="addGoodsFun" size="small">
            + 增加商品
          </el-button>
          <el-button v-if="inputType && showBtn" type="primary" @click="openUpdate5" size="small">
            + 增加商品
          </el-button>
        </div>
        <el-table :data="goodsTable" border>
          <el-table-column prop="id" label="ID" width="60" />
          <el-table-column prop="goods_name" label="商品名称" />
          <el-table-column prop="goods_kind" label="商品类型" />
          <el-table-column prop="" label="规格/售价">
            <template #default="{ row }">
              <div>
                {{ row.goods_spec }}
              </div>
              <div style="color: red; font-weight: 600">
                ¥{{ row.price_selling }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="合同价">
            <template #default="{ row }">
              <el-input v-if="!inputType" placeholder="合同价" v-model="row.discount_amount" />
              <span v-else>{{ row.discount_amount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template #default="{ row }">
              <el-input placeholder="数量" v-if="!inputType" v-model="row.count" />
              <span v-else>{{ row.count }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80" v-if="showBtn">
            <template #default="scoped">
              <el-button type="danger" @click="goodsDel(scoped)" link>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px" v-if="ruleForm.sends && ruleForm.sends.length > 0">
          <h3>物流信息</h3>
          <el-table :data="ruleForm.sends" border>
            <el-table-column prop="company_name" label="快递名称" />
            <el-table-column prop="send_number" label="快递单号" />
            <el-table-column prop="send_remark" label="备注" />
          </el-table>
        </div>

        <!--合同变更记录 -->
        <div style="margin-top: 20px; position: relative">
          <h3>合同变更记录</h3>

          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index">
              <div>
                <el-button type="primary" link>
                  {{ activity.created_user }}
                </el-button>
                {{ activity.content }}
              </div>
              <div>
                {{ activity.created_at }}
              </div>
            </el-timeline-item>
          </el-timeline>
          <div class="no-data" v-if="activities.length == 0">暂无记录</div>
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit" v-if="!inputType">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 添加关联商品 -->
  <goodsPage ref="goodsPageRef" @selectGoodsFun="selectGoodsFun" />
  <!-- 编辑组件 -->
  <!-- 基本信息 -->
  <update1 ref="update1Ref" :contractOptions="contractOptions" :dataInfo="dataInfo" :userOptions="userOptions"
    :userData="userData" @refreshFun="refreshFun" />
  <update2 ref="update2Ref" :dataInfo="dataInfo" @refreshList="refreshFun" />
  <update3 ref="update3Ref" :dataInfo="dataInfo" @refreshList="refreshFun" @addRefreshList="addRefreshList" />
  <update4 ref="update4Ref" :dataInfo="dataInfo" @refreshList="refreshFun" />
  <update5 ref="update5Ref" :dataInfo="dataInfo" @refreshList="refreshFun" />
  <imgDialog ref="imgDialogRef" />
</template>
<script setup>
import { treePersonApi } from "@/plugins/api/system/user";
import { fileApi } from "@/plugins/api/upload";
import { optionsApi } from "@/plugins/api/customer/manage/contacts";
import {
  addApi,
  detailApi,
  delGoodsApi,
  optionsApi as contractApi,
} from "@/plugins/api/customer/manage/tab4.js";
// 添加商品组件
import goodsPage from "./tab4/Tab4-dialog-goods.vue";
// 编辑组件

import update1 from "./tab4/Update-1.vue";
import update2 from "./tab4/Update-2.vue";
import update3 from "./tab4/Update-3.vue";
import update4 from "./tab4/Update-4.vue";
import update5 from "./tab4/Update-5.vue";

const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
  showBtn: {
    type: Boolean,
    default: true,
  },
});



// 查看图片
let imgDialogRef = ref(null);
function lookImg(src) {
  imgDialogRef.value.initFun(src, '70%');
}
function isImageUrl(url) {
  // 首先，检查URL是否包含至少一个'.'  
  if (!url.includes('.')) {
    return false;
  }

  // 使用split('.')分割URL，获取最后一个部分（通常是文件扩展名）  
  const parts = url.split('.');
  const extension = parts[parts.length - 1].toLowerCase(); // 转换为小写以忽略大小写差异  

  // 检查这个扩展名是否是你认为的图片类型  
  // 这里是一个简单的例子，你可以根据需要添加或修改这些扩展名  
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
  return imageExtensions.includes(extension);
}


//
// let dataInfo = ref({})
// 基本信息--1
let update1Ref = ref(null);
function openUpdate1() {
  update1Ref.value.initFun(ruleForm.value);
}
// 回款计划--2
let update2Ref = ref(null);
function openUpdate2() {
  update2Ref.value.initFun(ruleForm.value);
}
function openEdit2(scoped) {
  update2Ref.value.initFun(scoped.row, "edit");
}
// 回款记录--3
let update3Ref = ref(null);
function openUpdate3() {
  update3Ref.value.initFun(ruleForm.value);
}
function openEdit3(row) {
  update3Ref.value.initFun(row, "edit");
}
// 配送信息--4
let update4Ref = ref(null);
function openUpdate4() {
  update4Ref.value.initFun(ruleForm.value);
}
// 配送信息--5
let update5Ref = ref(null);
function openUpdate5() {
  update5Ref.value.initFun(ruleForm.value);
}
//
//联系人(客户)
let userData = ref([]);
function getCustomer() {
  optionsApi({
    customer_id: props.dataInfo.customer_id,
  }).then((res) => {
    userData.value = res;
  });
}
let ruleForm = ref({});
let rules = {
  order_name: [
    {
      required: true,
      message: "合同名称",
      trigger: "blur",
    },
  ],
  order_no: [
    {
      required: true,
      message: "合同编号",
      trigger: "blur",
    },
  ],
  is_virtual: [
    {
      required: true,
      message: "虚拟合同",
      trigger: "change",
    },
  ],
  order_uid: [
    {
      required: true,
      message: "公司签署人",
      trigger: "change",
    },
  ],
  contact_id: [
    {
      required: true,
      message: "客户签署人",
      trigger: "change",
    },
  ],
  amount_real: [
    {
      required: true,
      message: "合同金额",
      trigger: "blur",
    },
  ],
  has_fax: [
    {
      required: true,
      message: "是否含税",
      trigger: "change",
    },
  ],
  owner_by: [
    {
      required: true,
      message: "选择销售",
      trigger: "change",
    },
  ],
  addr_name: [
    {
      required: true,
      message: "收货人",
      trigger: "blur",
    },
  ],
  addr_phone: [
    {
      required: true,
      message: "收货人电话",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "收货地址",
      trigger: "blur",
    },
  ],
};
let dialogVisible = ref(false);
function handleClose(done) {
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => { });
}
let title = ref("");
let submitType = ref("");
let inputType = computed(() => {
  return submitType.value == "add" ? false : true;
});
let ruleFormRef = ref(null);

function initFun(type, row) {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  ruleForm.value = {};
  submitType.value = type;

  if (type == "update") {
    title.value = `合同名称：${row.order_name}`;
    detailFun(row.id);
  } else {
    title.value = "新增";
  }
  ruleForm.value.is_virtual = 0; //是否是虚拟合同
  ruleForm.value.has_fax = 0; //是否含税
  ruleForm.value.is_invoice = 0; //是否开具发票
  fileList.value = []; //清空文件列表
  collectionTable.value = []; //回款记划
  collectionLogs.value = []; //回款记录

  collectionForm.value = {};
  goodsTable.value = []; //商品
  activities.value = []; //变更记录
  if (!props.showBtn) {
    ruleForm.value = { ...row };
  }
  // 配送信息
  ruleForm.value.addr_name = props.dataInfo.shouhuoren;
  ruleForm.value.addr_phone = props.dataInfo.shouhuophone;
  ruleForm.value.address = props.dataInfo.shouhuoaddress;
  //

  dialogVisible.value = true;
  getCustomer();
  getUsers();
  getContract();
}
function detailFun(id) {
  return new Promise((resolve, reject) => {
    detailApi(id).then((res) => {
      ruleForm.value = { ...res };
      resolve(res);
      if (res.files_arr) {
        fileList.value = res.files_arr.slice();
        delete res.files_arr;
      }
      if (res.plans) {
        collectionTable.value = res.plans.slice();
        delete res.plans;
      }
      if (res.reces) {
        collectionLogs.value = res.reces.slice();
        delete res.reces;
      }
      if (res.goods) {
        goodsTable.value = res.goods.map((item) => {
          item.count = item.stock_sales;
          return item;
        });
        delete res.goods;
      }
      if (res.logs) {
        activities.value = res.logs;
        delete res.logs;
      }
      if (res.start_date && res.end_date) {
        ruleForm.value.datetimerange = [];
        ruleForm.value.datetimerange.push(res.start_date);
        ruleForm.value.datetimerange.push(res.end_date);
      }
      if (res.contracts) {
        ruleForm.value.contract = res.contracts.split(",").map((item) => {
          return parseInt(item);
        });
      }
    });
  });
}
function refreshFun() {
  detailFun(ruleForm.value.id);
  emit("refreshList");
}
//
function addRefreshList(row) {
  collectionLogs.value.push(row);
}
const emit = defineEmits(["refreshList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = Object.assign({}, ruleForm.value);
      obj.customer_id = props.dataInfo.id;
      if (
        ruleForm.value.datetimerange &&
        ruleForm.value.datetimerange.length == 2
      ) {
        obj.start_date = ruleForm.value.datetimerange[0];
        obj.end_date = ruleForm.value.datetimerange[1];
      }
      if (fileList.value.length > 0) {
        obj.files = [...fileList.value];
      }
      //
      obj.plans = [...collectionTable.value];
      if (
        collectionForm.value.num &&
        collectionForm.value.plan_money &&
        collectionForm.value.plan_date
      ) {
        obj.plans.push(collectionForm.value);
      }
      //
      obj.goods = goodsTable.value.map((ele) => {
        ele.sku_id = ele.id;
        return ele;
      });
      if (ruleForm.value.contract) {
        obj.contracts = ruleForm.value.contract.join(",");
      }
      addApi(obj).then(() => {
        ElMessage.success("添加成功！");
        dialogVisible.value = false;
        emit("refreshList");
      });
    }
  });
}

// 自动创建
function heTongChange(type) {
  if (type) {
    ruleForm.value.c = new Date();
  }
}
// 销售
let userOptions = ref([]);
function getUsers() {
  treePersonApi().then((res) => {
    userOptions.value = res;
  });
}
// 文件上传
let fileList = ref([]);
function fileOnChange(file) {
  let formData = new FormData();
  formData.append("file", file.raw);
  fileApi(formData).then((resp) => {
    if (resp) {
      fileList.value.push({
        name: resp.file_name,
        url: resp.file_url,
      });
    } else {
      ElMessage.danger("上传失败！请重新上传！");
    }
  });
}
function fileRemove(i) {
  fileList.value.splice(i, 1);
}
// 相关合同
let contractOptions = ref([]);
function getContract() {
  contractApi({
    customer_id: props.dataInfo.customer_id,
  }).then((data) => {
    contractOptions.value = data;
  });
}
// 回款信息
let collectionTable = ref([]);
let collectionForm = ref({});
function collectionDel(row) {
  collectionTable.value.splice(row.$index, 1);
}

function addCollection() {
  if (!collectionForm.value.num) {
    return ElMessage.warning("请输入期次");
  }
  if (!collectionForm.value.plan_money) {
    return ElMessage.warning("请输入金额");
  }
  if (!collectionForm.value.plan_date) {
    return ElMessage.warning("请选择时间");
  }
  collectionTable.value.push(collectionForm.value);
  collectionForm.value = {};
}
// 回款记录
let collectionLogs = ref([]);

// 商品明细
let goodsTable = ref([]);
let goodsPageRef = ref(null);
function addGoodsFun() {
  goodsPageRef.value.initFun();
}
function selectGoodsFun(arr) {
  if (arr && arr.length > 0) {
    arr.forEach((item) => {
      // 不再判断是否有相同的商品，直接添加
      // if (
      //   !goodsTable.value.some((ele) => {
      //     return ele.id == item.id;
      //   })
      // ) {
      goodsTable.value.push(item);
      // }
    });
  }
}
function goodsDel(scoped) {
  if (!inputType.value) {
    goodsTable.value.splice(scoped.$index, 1);
  } else {
    delGoodsApi(scoped.row.id).then(() => {
      ElMessage.success("删除成功！");
      detailFun(ruleForm.value.id);
      emit("refreshList");
    });
  }
}
let allData = computed(() => {
  let num = 0;
  let price = 0;
  goodsTable.value.forEach((item) => {
    if (item.count) {
      num = num + parseFloat(item.count);
    }
    if (item.discount_amount) {
      price = price + parseFloat(item.count) * parseFloat(item.discount_amount);
    }
  });
  return {
    num,
    price,
  };
});
// 合同变更记录
let activities = ref([]);

onMounted(() => { });
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.tab4-dialog-hetong {
  h3 {
    margin: 0;
    margin-bottom: 20px;
  }

  :deep(.el-form-item) {
    width: 50%;
    margin-right: 0;
  }

  .goods-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    span {
      margin-right: 20px;
    }
  }

  .file-list {
    width: 100%;

    .file-list-item {
      display: flex;

      span {
        align-self: center;
      }

      .close {
        display: none;
        align-self: center;
        margin-left: 20px;
        cursor: pointer;

        &:hover {
          color: #0f88ce;
        }
      }

      &:hover .close {
        display: block;
      }
    }
  }

  .no-data {
    position: absolute;
    color: #989a9b;
    font-size: 12px;
    margin: 30px 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .title-box {
    display: flex;
    justify-content: space-between;

    h3,
    .icon {
      align-self: center;
    }

    .icon {
      cursor: pointer;
      font-size: 18px;
      font-weight: 800;

      &:hover {
        color: rgb(36, 150, 243);
      }
    }
  }
}
</style>
